import React, { PureComponent } from "react"
// CSS-in-JS通过js来为css赋予一些能力，包括类似于css预处理器一样的样式嵌套，
// 函数定义，逻辑复用，动态修改值等。
// 但是这只是一种思想，来看下开源社区的这种思想的插件（因为官方不管css）：
// styled-components插件

import "./回顾模版字符串调用函数"
import { AppWrapper, FootButtonWrapper, SectionWrapper } from "./style"

export default class CssInJs extends PureComponent {
  constructor() {
    super()
    this.state = {
      color: "",
      fontSize: "50px"
    }
  }

  render() {
    const { color, fontSize } = this.state
    return (
      <div>
        <AppWrapper>
          <SectionWrapper color={color} fontSize={fontSize}>
            <h3 className="title">标题</h3>
            <p className="content">内容</p>
            <button onClick={(e) => this.setState({ color: "skyBlue" })}>
              更改为skyBlue hover
            </button>
          </SectionWrapper>
          <div className="footer">
            <div>结尾</div>
            <FootButtonWrapper>button1</FootButtonWrapper>
            <FootButtonWrapper>button2</FootButtonWrapper>
          </div>
        </AppWrapper>
      </div>
    )
  }
}
